<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>web13</title>
        <meta name="description" content="" />
        <meta name="author" content="Choongang31" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
       
         <link href="css/pepper-grinder/jquery-ui-1.10.0.custom.css" rel="stylesheet">          
         <script src="js/jquery-1.9.0.js"></script>
         <script src="js/jquery-ui-1.10.0.custom.js"></script>
         <link href="fresco-1.1.3-light/css/fresco/fresco.css" rel="stylesheet"> 
         <script src="js/fresco/fresco.js"></script>
         
         <style>
               #draggable,#resizable{
                 width:200px; height:100px;
                 border-width:5px;
                 border-style: solid;
                 border-color:black;
                 display:block;   
             }
               #droppable{
                 width:400px; height:200px;
                 border-width:1px;
                 border-style: solid;
                 border-color:black;
                 display:block;
             }
           
             #selectable.ui-selecting{
                 background-color:yellow;
             }
             #selectable.ui-selected{
                 background-color:red;
             }
         </style>
         <script>
             $(function(){
                 //그 대상에 jQuery ui클래스가 붙습니다.
                 //그 클래스에는 클릭할때, 마우스 누를때, 뗄때마다 붙는 class가 달라집니다.
                $("#resizable").resizable();
                $("#draggable").draggable(); 
                $("#droppable").droppable({
                    drop:function(event,ui){
                        $("#droppable").text(event+" "+ui);
                    }
                });
                $("#selectable").selectable();
                $("#accordion").accordion();
              
                var data=["apple","airplane","africa"];
                $("input:text").autocomplete({
                    source: data                    
                });
                $("[name:datepicker]").datepicker();
                changeMonth:true;  //{옵션을 줄때 사용 속성:값 속성:값...}
                changeYear:true;
                $( "#tabs" ).tabs();
             });
         </script>
    </head>

    <body>
        <h5>fresco Image show plugin</h5>
        <a href="7A2BE7EEFEF83F7F.jpg" class="fresco">show image1</a>
        <a href="82FEC52F81C39AC7.jpg" class="fresco">show image2</a>
       
        <h5>jQuery UI는 UI 의 모음집 </h5>
        tabs
        <div id="tabs">
            <ol>
                <li><a href="#tab1">탭1</a></li>
                <li><a href="#tab2">탭2</a></li>
                <li><a href="#tab3">탭3</a></li>
            </ol>
            <div id="tab1">탭 1의 본문 </div>
            <div id="tab2">탭 2의 본문 </div>
            <div id="tab3">탭 3의 본문 </div>
        </div>
        datepicker<input type="text" name="datepicker">
        autocomplete<input type="text" name="autocomplete">
        <div id="accordion">
            <h3>피아노 </h3>
            <div>바이엘,체르니 ...</div>
            <h3>기타 </h3>
            <div>기타.. ...</div>
            <h3>드럼  </h3>
            <div>드럼... ...</div>
            
        </div>
        <ol id="selectable">
            <li class="div-widget-content">first</li>
            <li class="div-widget-content">second</li>
            <li class="div-widget-content">third</li>
            <li class="div-widget-content">눌러보세요 </li>
        </ol>
        <div id="draggable" class="div-widget-content">
              <p>1.draggable div-widget-content 는 css파일에 선언되어 있습니다.</p> 
        </div>
        <div id="droppable" class="ui-widget-header">
            <p>2.droppable ui-widget-header</p>
        </div>
        <div id="resizable" class="div-widget-content">
            <p>3.resizable 크기를 조절하세요.</p>
        </div>
   
   
   
    </body>
</html>
